<template>
  <div id="vestList">
    <h1 class="con-right-title">
      马甲管理
    </h1>
    <div class="bottom-box">
      <!--table-->
      <div class="table">
        <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
        <!-- 操作按钮部分 -->
        <div class="table-conBtn">
          <el-button
            v-permission="'wh:system:robot:addRobot'"
            type="warning"
            @click="addVest"
          >
            添加马甲
          </el-button>
          <el-button
            v-permission="'wh:system:robot:import'"
            type="warning"
            icon="el-icon-upload2"
            @click="importBtn"
          >
            批量增加
          </el-button>
          <el-button
            v-permission="'wh:system:robot:binding'"
            type="warning"
            @click="showBindVest"
          >
            绑定马甲
          </el-button>
          <el-button
            v-permission="'wh:system:robot:untied'"
            type="warning"
            plain
            @click="removeBindSome"
          >
            解绑马甲
          </el-button>
          <el-button
            v-permission="'wh:system:robot:untying'"
            :disabled="isAble"
            type="warning"
            plain
            @click="untieAllVests"
          >
            解绑全部马甲
          </el-button>
          <el-button
            v-permission="'wh:system:robot:editImport'"
            type="warning"
            icon="el-icon-download"
            @click="handleEditRobot"
            >批量修改马甲信息
          </el-button>
          <el-button
            v-permission="'wh:system:robot:export'"
            type="warning"
            icon="el-icon-download"
            @click="handleCommand"
            >批量马甲导出
          </el-button>
          <freshCom @searchList="searchList"></freshCom>
        </div>
        <!-- 表格部分 -->
        <el-table
          id="vest-box"
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          @selection-change="selectChange"
          max-height="490"
          ref="elTable"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            :selectable="selectAble"
          ></el-table-column>
          <el-table-column type="index" width="55" label="序号">
            <template slot-scope="scope">
              {{
                scope.$index
                  | filterPage(searchParams.pageNum, searchParams.pageSize)
              }}
            </template>
          </el-table-column>
          <el-table-column prop="robotGrade" width="90" label="马甲等级">
            <template slot-scope="scope">
              <span v-if="scope.row.robotGrade">{{
                scope.row.robotGrade | filterName('robGrade')
              }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="robotNickname"
            width="100"
            label="马甲昵称"
          ></el-table-column>
          <el-table-column prop="robotAccount" width="100" label="大鹏号">
            <template slot-scope="scope">
              <span v-if="scope.row.robotAccount">{{
                scope.row.robotAccount
              }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="fans"
            label="粉丝数"
            width="70"
          ></el-table-column>
          <el-table-column
            prop="robotMobile"
            width="110"
            label="手机号"
          ></el-table-column>
          <el-table-column label="所属运营者" width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.id && scope.row.operateUser">
                {{ scope.row.operateUser.nickName }}
              </div>
              <div v-else>
                -
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="" width="110" label="维护运营人">
            <template slot-scope="scope">
              <span
                v-if="
                  scope.row.robotOperatorUser &&
                    scope.row.robotOperatorUser.nickName
                "
                >{{ scope.row.robotOperatorUser.nickName }}</span
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="绑定时间" width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.id">
                {{ scope.row.bindingDate | timeToTime }}
              </div>
              <div v-else>
                -
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="robotMaintainTime"
            width="100"
            label="维护时间"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.robotMaintainTime">
                {{ scope.row.robotMaintainTime | timeToTime }}
              </div>
              <div v-else>
                -
              </div>
            </template>
          </el-table-column>
          <el-table-column label="是否绑定运营者" width="140">
            <template slot-scope="scope">
              <div v-if="scope.row.id">
                已绑定
              </div>
              <div v-else>
                未绑定
              </div>
            </template>
          </el-table-column>
          <el-table-column label="备注" width="90">
            <template slot-scope="scope">
              <div v-if="scope.row.remark">
                {{ scope.row.remark }}
              </div>
              <div v-else>
                -
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="homeCount"
            width="100"
            label="发布作业数"
          ></el-table-column>
          <el-table-column
            prop="workCount"
            width="100"
            label="发布作品数"
          ></el-table-column>
          <el-table-column
            prop="lifeCount"
            width="100"
            label="发布动态数"
          ></el-table-column>
          <el-table-column
            prop="commentCount"
            width="100"
            label="发布评论数"
          ></el-table-column>
          <el-table-column
            prop="commentedCount"
            width="90"
            label="被评论数"
          ></el-table-column>
          <el-table-column label="状态" prop="robotStatus" min-width="60">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.robotStatus"
                :active-value="'open'"
                :inactive-value="'close'"
                active-color="#1DC8A4"
                @change="
                  changeStatus(
                    scope.row.robotStatus,
                    scope.row.robotId,
                    scope.$index
                  )
                "
              ></el-switch>
            </template>
          </el-table-column>
          <!--此处不能添加fixed="right"，会导致导出表格数据重复-->
          <el-table-column label="操作" width="140">
            <template slot-scope="scope">
              <template v-if="scope.row.id">
                <el-button
                  v-permission="'wh:system:robot:edit'"
                  v-if="scope.row.remark"
                  type="text"
                  @click="showEditNote(scope.row)"
                >
                  编辑备注
                </el-button>
                <el-button
                  v-else
                  type="text"
                  @click="showAddNote(scope.row.id)"
                >
                  添加备注
                </el-button>
                <template
                  v-permission="'wh:system:robot:untied'"
                  v-if="scope.row.operateUser"
                >
                  <el-button type="text" @click="removeBind(scope.row.id)">
                    解绑
                  </el-button>
                </template>
              </template>
              <el-button
                v-permission="'wh:system:robot:editorLevel'"
                type="text"
                @click="editlevel(scope.row.robotId)"
              >
                编辑等级
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="searchList"
        ></pageCom>
        <!-- 添加弹窗 -->
        <addDialog
          v-if="addDialogData.isShow"
          :add-dialog-data="addDialogData"
          @refresh="refresh"
        ></addDialog>
        <!-- 编辑马甲等级弹窗 -->
        <editDialog
          v-if="editDialogData.isShow"
          :edit-dialog-data="editDialogData"
          @refresh="refresh"
        ></editDialog>
        <!-- 添加编辑备注弹窗 -->
        <addNote
          v-if="addNoteDialogData.isShow"
          :add-note-dialog-data="addNoteDialogData"
          @refresh="refresh"
        ></addNote>
        <!-- 绑定马甲弹窗 -->
        <bindVest
          v-if="bindVestDialog.isShow"
          :bind-vest-dialog="bindVestDialog"
          @refresh="refresh"
        ></bindVest>
        <!-- 导入弹窗 -->
        <importDialog
          v-if="importDialogData.isShow"
          :dialog-data="importDialogData"
          @refresh="refresh"
          @showError="showError"
        ></importDialog>
        <!-- 导入失败弹窗 -->
        <errorDialog
          v-if="errorDialogData.isShow"
          :dialog-data="errorDialogData"
          from="vestWord"
        ></errorDialog>
        <errorDialog
          v-if="errorDialogData.isShow"
          :dialog-data="errorDialogData"
          from="batchWord"
        ></errorDialog>
      </div>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
import {
  getSearchList,
  removeBindAPI,
  removeBindSomeAPI,
  importUrl,
  downUrl,
  importEdit,
  batchDownUrl,
  untieAllVestsAPI,
  robotStatusAPI
} from '@/api/vestManagement/vestManage' // 接口
import topSearch from '@component/vestManagement/vestManage/topSearch' // 上部搜索条件
import addNote from '@component/vestManagement/vestManage/addNoteDialog' // 添加备注弹窗
import editDialog from '@component/vestManagement/vestManage/editDialog' // 编辑马甲等级弹窗
import addDialog from '@component/vestManagement/vestManage/addDialog' // 添加编辑弹窗
import bindVest from '@component/vestManagement/vestManage/bindVestDialog' // 绑定马甲弹窗
import importDialog from '@common/importDialog' // 导入弹窗
import errorDialog from '@common/errorDialog' // 导入失败弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
import { exportTab } from '@utils/tableExport' // 导出
export default {
  name: 'autoComment',
  msg: '马甲管理',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    addNote,
    addDialog,
    editDialog,
    bindVest,
    importDialog,
    errorDialog
  },
  data() {
    return {
      loading: true,
      isAble: true,
      total: 0,
      tableData: [], // table内容
      userId: '',
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        operateId: '', // 运营人员,默认所有
        unbound: '', // 绑定,默认所有
        content: '', // 搜索框内容
        robotStatus: '', // 开启状态
        sort: '', // 排序规则
        robotGrade: '' // 马甲等级
      },
      // 选中行的数据
      selectData: [],
      powerStr: 'system:robot:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false, // 是否显示当前页面
      // 多选解绑按钮禁用
      isDisabled: true,
      // 传递给添加编辑备注弹窗
      addNoteDialogData: {
        isShow: false, // 控制是否显示
        params: {} // 传递的参数
      },
      // 传递给添加弹窗
      addDialogData: {
        isShow: false, // 控制是否显示
        params: {} // 传递的参数
      },
      // 传递给编辑等级弹窗
      editDialogData: {
        isShow: false, // 控制是否显示
        params: {} // 传递的参数
      },
      // 传递给绑定马甲弹窗
      bindVestDialog: {
        isShow: false, // 控制是否显示
        params: {} // 传递的参数
      },
      // 传递给导入弹框的数据
      importDialogData: {
        title: '',
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      }
    }
  },
  watch: {
    'formInline.operateId': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.isAble = false
        } else {
          this.isAble = true
        }
      },
      deep: true
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    // 获取权限
    // this.getPower()
    exportTab()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        }
      })
    },

    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getSearchList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.msg,
            type: 'warning'
          })
        }
      )
    },
    // clickRow(row) {
    //   if (row.id) {
    //     this.$refs.tb.toggleRowSelection(row)
    //   }
    // },
    selectAble(row, index) {
      if (row && row.id) {
        return true
      } else {
        return false
      }
    },
    // 选择框改变事件
    selectChange(value) {
      this.selectData = value
      this.isDisabled = !(this.selectData.length > 0)
    },

    // 导出马甲消息
    handleCommand() {
      this.$confirm('确定要导出当前页所有马甲吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          $('#vest-box').tableExport({
            type: 'excel',
            escape: 'false',
            params: this.formInline
          })
        })
        .catch(() => {})
    },
    // 状态切换提示
    changeStatus(robotStatus, robotId, index) {
      let _this = this
      if (robotStatus === 'close') {
        // 关闭
        this.$confirm('确定要关闭使用当前马甲吗？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            _this.changeStatusRequire(robotStatus, robotId, index)
          })
          .catch(() => {
            this.tableData[index].robotStatus = 'open'
            /* this.$message({
                 type: "info",
                 message: "已取消停用"
               }); */
          })
      } else {
        // 启用
        this.$confirm('确定要开启使用当前马甲吗？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            _this.changeStatusRequire(robotStatus, robotId, index)
          })
          .catch(() => {
            this.tableData[index].robotStatus = 'close'
          })
      }
    },
    /* 改变状态，请求接口 */
    changeStatusRequire(robotStatus, robotId, index) {
      let obj = {
        robotStatus: robotStatus
      }
      robotStatusAPI(
        robotId,
        obj,
        (response) => {
          let mes = robotStatus === 'close' ? '已停用' : '已启用'
          this.$message({
            type: 'success',
            message: mes
          })
        },
        (response) => {
          this.tableData[index].robotStatus = 'open'
          this.$message({
            message: response.msg,
            type: 'warning'
          })
        }
      )
    },
    // 编辑等级
    editlevel(robotId) {
      this.editDialogData.params.id = robotId
      this.editDialogData.isShow = true
    },
    // 当前页码改变事件
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    // 导入按钮点击事件
    importBtn() {
      this.importDialogData.url = importUrl() // 导入接口
      this.importDialogData.downUrl = downUrl() // 下载模板接口
      this.importDialogData.isShow = true
      this.importDialogData.title = '批量添加'
    },
    // 批量修改按钮点击事件
    handleEditRobot() {
      this.importDialogData.url = importEdit() // 导入接口
      this.importDialogData.downUrl = batchDownUrl() // 下载模板接口
      this.importDialogData.isShow = true
      this.importDialogData.title = '批量修改'
    },
    /* 导入失败弹窗 */
    showError(text) {
      this.errorDialogData.isShow = true // 显示导入失败弹框
      this.errorDialogData.warningText = text // 显示导入失败弹框
    },
    /* 批量解绑按钮 */
    removeBindSome() {
      if (this.selectData.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认要解绑选中的${this.selectData.length}条数据吗?`,
        '解绑提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let bindingIds = []
        this.selectData.forEach((item) => {
          bindingIds.push(item.id)
        })
        let obj = { robotsIds: bindingIds.join(',') }
        removeBindSomeAPI(obj, (response) => {
          this.$message({
            message: '解绑马甲成功',
            type: 'success'
          })
          this.searchList()
        })
      })
    },
    /* 解绑单个按钮 */
    removeBind(id) {
      this.$confirm(`确认要解绑马甲吗？`, '解绑提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // let obj = { bindingIds }
        removeBindAPI(id, (response) => {
          this.$message({
            message: '解绑马甲成功',
            type: 'success'
          })
          this.searchList()
        })
      })
    },
    /*解绑全部马甲按钮 */
    untieAllVests(operateId) {
      this.$confirm(`确定要解绑该用户所有马甲吗？`, '解绑提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // let obj = {
        //   operateId: this.formInline.operateId
        // }
        untieAllVestsAPI(this.formInline.operateId, (response) => {
          this.$message({
            message: '解绑马甲成功',
            type: 'success'
          })
          this.searchList()
        })
      })
    },
    // 添加按钮点击事件
    addVest() {
      this.addDialogData.isShow = true
    },
    // 添加备注按钮点击事件
    showAddNote(id) {
      this.addNoteDialogData.isShow = true
      this.addNoteDialogData.params.title = '添加备注'
      this.addNoteDialogData.params.id = id
    },
    // 编辑备注按钮点击事件
    showEditNote(item) {
      this.addNoteDialogData.isShow = true
      this.addNoteDialogData.params.title = '编辑备注'
      this.addNoteDialogData.params.id = item.id
      this.addNoteDialogData.params.remark = item.remark
    },
    // 绑定马甲按钮点击事件
    showBindVest() {
      this.bindVestDialog.isShow = true
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less" scoped>
.el-table {
  margin-top: 20px;
}
</style>
